<template>
  <!--content-->
  <div class="content">
    <!--轮播-->
    <div class="l_show">
      <div class="swiper-container lunbo">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="n in item.imgs">
            <img :src="n" alt="">
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
      <div class="miao">{{item.name}}</div>
    </div>
    <div class="xianggang">
      <a href="#">
        <img src="../../assets/img/y_icon2.png" alt="">
        <span>香港直邮</span>
      </a>
    </div>
    <div class="zhe">
      <div class="t_zhe">
        <div class="left_zhe">
          <img src="../../assets/img/y_hei.png" alt="">
          <span>￥{{item.newprice}}</span>
        </div>
        <div class="right_zhe">
          <span class="old">￥{{item.oldprice}}</span>
          <span>7折</span>
        </div>
      </div>
      <div class="b_zhe">
        <span class="mian">facher 满3500元免邮</span>
       {{item.describe}}
      </div>
    </div>
    <div class="juan">
      <div class="juan_box">
        <span>look6个优惠券：look黑货洋节满699减100</span>
        <span>立即领劵</span>
      </div>
    </div>
    <div class="empty"></div>
    <div class="dian">
      <div class="dian_name">
        <div class="dian_left">
          <img :src="item.icon" alt="">
          <div>
            <p>{{item.storename}}</p>
            <p style="color:#737573;font-size: 13px;">全球顶级时尚买手电商</p>
          </div>
        </div>
        <div style="margin-top:0.24rem">
          <a href="#" class="enter">
            <span>进入店铺</span>
          </a>
        </div>
      </div>
      <ul class="word">
        <li>L满380元免邮费，支持支付宝，地址可写中文。点击直达折扣信息</li>
        <li>Lookfantastic护肤美妆，一站式海淘，100%正品直邮中国。年度黑五大促现已开始</li>
        <li>香缇卡,欧缇丽,Illamasqua,Elemis等护肤美妆大牌lookfantastic满40英镑英国包邮中国,多种便捷付款方式.</li>
        <li>阅读量:4735跟风有风险,剁手需谨慎!有时候顶不住种草之风...</li>
      </ul>
    </div>
    <div class="empty"></div>
    <div class="message">
      <div class="ssw">
        <span>商品信息</span>
        <a href="javascript:;"><i class="iconfont icon-icon1" @click="xianshi" style="font-size:40px"></i></a>
      </div>
      <div class="so">
        <p>适用人群：女</p>
        <p>颜色：green</p>
        <div class="yin">
            <p>尺码：（意大利）</p>
            <p>尺码类型：意大利</p>
            <p></p>产品编号：2345-355</p>
            <p>详情：10毫米的鞋跟 仿珍珠皮革细节</p>
        </div>
      </div>
    </div>
    <div class="tu">
      <span>图文详情</span>
      <ul class="imag">
        <li v-for="n in item.imgs">
          <img :src="n" alt="">
        </li>
      </ul>
    </div>
    <div class="empty"></div>
    <div class="dian">
      <div class="dian_name">
        <div class="dian_left">
          <img src="../../assets/img/y_biao1.png" alt="">
          <div>
            <p>Farfetch</p>
            <p style="color:#737573;font-size: 13px;">全球顶级时尚买手电商</p>
          </div>
        </div>
        <div style="margin-top:0.24rem">
          <a href="#" class="enter">
            <span>进入品牌</span>
          </a>
        </div>
      </div>
    </div>
    <ul class="luntu">
      <li><img src="../../assets/img/3.jpg" alt=""><span>￥2344</span></li>
      <li><img src="../../assets/img/7.jpg" alt=""><span>￥2344</span></li>
      <li><img src="../../assets/img/8.jpg" alt=""><span>￥2344</span></li>
      <li><img src="../../assets/img/9.jpg" alt=""><span>￥2344</span></li>
    </ul>
    <div class="empty"></div>
    <div class="dan">
      <span>相关单品</span>
    </div>
    <ul class="luntu">
      <li><img src="../../assets/img/10.jpg" alt=""><span>￥1300</span></li>
      <li><img src="../../assets/img/11.jpg" alt=""><span>￥20.00</span></li>
      <li><img src="../../assets/img/10.jpg" alt=""><span>￥1500</span></li>
      <li><img src="../../assets/img/3.jpg" alt=""><span>￥5000</span></li>
      <li><img src="../../assets/img/9.jpg" alt=""><span>￥4500</span></li>
    </ul>
  </div>
</template>
<script type="text/ecmascript-6">
  import "../../assets/js/swiper-3.4.2.min.js";
    export default {
      props:["item"],
      mounted:function(){
        var swiper = new Swiper('.lunbo', {
          pagination: '.swiper-pagination',
          observer:true,
        });
      },
      methods:{
        xianshi:function(){
          $(".yin").slideToggle();
        },
      }
    }
</script>
<style scoped lang="scss">
  //content
  .content{
    flex:1;
    overflow-x:auto;
    overflow-y: scroll;
  }
  .l_show{
    display: flex;
    flex-direction: column;
  }
  .lunbo{
    width:100%;
    height:4rem;
  }
  .l_show .lun img{
    width:100%;
    height:100%;
  }
  .swiper-pagination-bullets{
    bottom:-20px!important;
  }
  .swiper-pagination-bullet-active{
    opacity: 1!important;
    background:black!important;
  }
  .miao{
    padding: 0.1rem 0.1rem 0.1rem 0.1rem;
    font-size: 16px;
    font-family: cursive;
    font-weight: bold;
    text-align: center;
  }
  .xianggang{
    padding: 0.1rem 0.1rem 0rem 0.1rem;
    background: #efeff7;
  }
  .xianggang>a{
    display: flex;
    background: white;
    font-size:14px;
    color:black;
    width:50%;
    text-align: center;
    line-height: 0.5rem;
    font-weight: bold;
  }
  .xianggang>a>img{
    width:0.25rem;
    height: 0.25rem;
    margin: 7% 5% 0% 20%;
  }
  .zhe{
    display: flex;
    flex-direction: column;
    padding: 0.1rem 0.1rem 0.15rem 0.1rem;
  }
  .t_zhe{
    display: flex;
    flex-direction: column;
    font-family: sans-serif;
  }
  .left_zhe{
    display: flex;
    font-size:18px;
    color: #ef145a;
  }
  .left_zhe img{
    height:0.3rem;
  }
  .left_zhe span{
    font-weight:bold;
    margin-top: 0.05rem;
    margin-left: 0.1rem;
  }
  .right_zhe{
    @extend .left_zhe;
    margin-top:0.05rem;
  }
  .right_zhe .old{
    margin-left:0;
    font-size:16px;
    color:gray;
    text-decoration: line-through;
  }
  .b_zhe{
    margin-top: 0.1rem;
    font-size:15px;
    font-family: sans-serif;
  }
  .mian{
    color:#ef145a;
    border:1px solid #ef145a;
    padding:0.03rem;
    width:100%;
    height:0.3rem;
    line-height: 0.3rem;
    font-weight:bold;
  }
  .juan{
    padding: 0rem 0.1rem 0.15rem 0.1rem;
  }
  .juan_box{
    display: flex;
    justify-content:space-between;
    border-top:1px solid #dedfde;
    padding-top:0.15rem;
  }
  .juan span:nth-child(1){
    font-size:12px;
  }
  .juan span:nth-child(2){
    font-size:14px;
    color:#ef145a;
  }
  .empty{
    height:0.15rem;
    background:#f7f7f7;
  }
  .dian{
    @extend .zhe;
  }
  .dan{
    font-size:16px;
    font-weight:bold;
    display: flex;
    flex-direction: column;
    padding: 0.1rem 0.1rem 0rem 0.1rem;
  }
  .dian_name{
    display: flex;
    justify-content: space-between;
    font-size:16px;
  }
  .dian_left{
    display:flex;
  }
  .dian_left img{
    width:0.7rem;
    height:0.7rem;
  }
  .dian_left>div{
    font-size: 14px;
    margin-left: 0.1rem;
    line-height: 0.25rem;
    margin-top: 0.1rem;
    font-weight: bold;
  }
  .enter {
    border: 1px solid #ef145a;
    text-align: center;
    padding: 0.05rem 0.15rem 0.05rem 0.15rem;
    color: #ef145a;
    margin-top: 0.2rem;
    border-radius:15px;
  }
  .word{
    font-size:14px;
    margin-top:0.3rem;
  }
  .word li{
    line-height: 0.24rem;
    font-family: inherit;
    list-style-position: inside;
    list-style-type: disc;
  }
  .message{
    display: flex;
    flex-direction: column;
    margin: 0.1rem 0.1rem 0rem 0.1rem;
    padding-bottom:0.15rem;
    border-bottom:1px solid gray;
  }
  .ssw{
    display: flex;
    font-size:18px;
    justify-content:space-between;
  }
  .ssw span{
    margin-top: 0.1rem;
    font-weight:bold;
    font-family: initial;
  }
  .so{
    font-size: 16px;
    padding-top: 0.1rem;
    padding-left: 0.2rem;
    font-weight: bold;
    font-family: initial;
    line-height: 0.3rem;
  }
  .tu{
    display: flex;
    padding: 0.1rem 0.1rem 0 0.1rem;
    flex-direction: column;
    margin-top: 0.1rem;
    font-weight:bold;
    font-size: 18px;
    font-family: initial;
  }
  .tu span{
    padding-bottom: 0.1rem;
  }
  .imag li{
    height:5rem;
  }
  .imag li img{
    width:100%;
    height:95%;
  }
  .luntu{
    display: flex;
    font-size: 16px;
    margin-top: 0.2rem;
    overflow-x: auto;
    overflow-y:hidden;
    padding-bottom:0.1rem;
  }
  .luntu>li{
    display: block;
    padding-right: 0.7rem;
    padding-bottom: 0.3rem;
  }
  .luntu li img{
    width:130%;
    height:100%;
    padding-bottom: 0.1rem;
    font-weight: bold;
  }
  .luntu li span{
    margin-top:0.3rem;
    text-align: center;
    margin-left:0.1rem;
  }
  .yin{
    display: none;
  }
</style>
